<template>
	<switch-patient :fun="getId"></switch-patient>
	<view class="timePick">
		<view :class="year?'active':''" @click="setYear">近一年</view>
		<uni-datetime-picker v-model="Daterange" @change="selTime" type="daterange">
			<view :class="['picker',!year?'active':'']">选择时间 ▼</view>
		</uni-datetime-picker>
	</view>
	<Card v-for="v in dataList" :key="v" :cardData="v"></Card>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import Card from './Card.vue'
	import {
		ref,
		watch
	} from 'vue'
	import {
		getPatientExpenses
	} from '@/api/personApi.js'
	const patientId = ref(0)
	const dataList = ref([])
	const Daterange = ref(['', ''])
	const year = ref(true)
	const getId = ({
		id
	}) => {
		patientId.value = id
	}
	const getData = async () => {
		let {
			data
		} = await getPatientExpenses({
			id: patientId.value,
			startTime: Daterange.value[0],
			endTime: Daterange.value[1]
		})
		if (data.code == 0) {
			dataList.value = data.data
		}
	}
	const setYear = () => {
		let end = new Date().toLocaleDateString().replace(/\//g, '-')
		let arr = end.split('-')
		arr[0] = Number(arr[0]) - 1
		let start = arr.join('-')
		Daterange.value[0] = start
		Daterange.value[1] = end
		year.value = true
	}
	const selTime = (v) => {
		Daterange[0] = v[0]
		Daterange[1] = v[1]
		year.value = false
	}
	setYear()
	watch(patientId, () => {
		getData()
	})
</script>

<style lang="less" scoped>
	.timePick {
		display: flex;
		padding: 10rpx 30rpx;

		view {
			width: 128rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			border-radius: 48rpx;
			font-size: 24rpx;
			margin-right: 30rpx;
		}



		.picker {
			background: #e4f0ff;
			color: #5088ff;
			width: 180rpx;
		}

		.active {
			background: #006eff;
			color: #fff;
		}
	}

	.popup {
		background: #fff;
		height: 532rpx;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10px 10px 0 0;

		.btn {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			font-size: 32rpx;
			border-bottom: 1px solid #e4f0ff;

			text:nth-child(1) {
				color: gray;
			}

			text:nth-child(2) {
				color: #5088ff;
			}
		}

		.timePicker {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.pick {
				width: 250rpx;
				height: 60rpx;
				display: inline-block;
				text-align: center;
				line-height: 60rpx;
				border-radius: 4px;
				font-size: 28rpx;
				background: #e6f1ff;
				color: #5088ff;
			}

			.active {
				background-color: #006eff;
				color: #fff;
			}
		}
	}
</style>
